<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page language="java" import="com.server.web.JsVersionUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>${platformName}</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="<c:url value='/share/bootstrap.min.css'></c:url>">
<link rel="stylesheet"
	href="<c:url value='/share/AllStyle.css'></c:url>">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<c:url value='/js/jquery.min.js'></c:url>"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<c:url value='/js/bootstrap.min.js'></c:url>"></script>
<script src="<c:url value='/js/all.js'></c:url>"></script>
<%-- <script src="<c:url value='/js/rqfCommon/sockjs-0.3.min.js'></c:url>"></script> --%>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script src="<c:url value='/js/rqfCommon/stomp.js'></c:url>"></script>
<script src="<c:url value='/js/serverCommonJs.js'></c:url>"></script>
<script src="<c:url value='/js/rqfCommon/rqfCommon.js'></c:url>"></script>
<style type="text/css">
#touxiang_true {
	margin-right: 10px;
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin-top: 3px;
	display: block;
	line-height: 60px;
	color: #787d82;
	text-align: center;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
a#dropdownMenu1{
	padding: 3px 12px;
}

.vertical {
	margin: 0 8px;
	background: #dae1e6;
	display: inline-block;
	width: 1px;
	height: 24px;
	vertical-align: middle;
}

.body {
	width: 100%;
	height: 100%;
}

html,body{
	overflow-y: hidden;
}

.header-tool-news .header-tc-content {
    width: 302px;
    padding: 0 26px;
    line-height: 34px;
    right: -69px;
    text-align: center;
}
.header-tc-content {
	display: none;
    position: absolute;
    border: 1px solid #ccc;
    width: 370px;
    left: -183px;
    top: 40px;
    background-color: #fff;
    text-align: left;
    /* display: none; */
    z-index: 2;
    color: #4b4b4b;
    font-size: 12px;
    height: auto!important;
    min-height: 32px;
    height: 32px;
    box-shadow: 0 2px 5px #d5d5d5;
}

.header-tool-news .header-tc-content .header-tc-ct-bg {
    right: 76px;
}
.header-tc-ct-bg {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border: 7px solid #ccc;
    border-color: transparent transparent #ccc;
    z-index: 5;
}

.header-tc-ct-bg:before {
    content: "";
    position: absolute;
    top: -7px;
    right: -8px;
    width: 0;
    height: 0;
    border: 8px solid #fff;
    border-color: transparent transparent #fff;
    z-index: 3;
}
.news-title {
    line-height: 42px;
    overflow: hidden;
    border-bottom: 1px solid #2459aa;
    margin: 0 18px;
}
.news-list {
    margin: 0;
    padding: 0;
    max-height: 332px;
    overflow-y: auto;
    margin: 0 18px;
    position: relative;
}
.news-bottom {
    line-height: 42px;
    text-align: center;
    border-top: 1px solid #e0e6f1;
    background: #f6f6f6;
    color: rgb(180, 180, 180);
}
.news-title .news-title-ctx {
    color: #2459aa;
    font-size: 14px;
    float: left;
}
.news-bottom .news-more {
    color: #b4b4b4;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.news-item{
	line-height: 60px;
	border-bottom: 1px solid #e0e6f1;
}
.news-item:last-child {
    border-bottom: none;
}
.news-ctx-link{
  color: rgb(124, 124, 125);
  font-size: 14px;
  overflow: hidden;
  width: 300px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  float: left;
}
.news-ctx{
	position: relative;
    overflow: hidden;
}
.wh_Home_news{
	float: left;
	padding-bottom: 10px;
}

@media screen and (min-width:1189px){
  .Interface_center{
  	width: 1190px !important;
  }
}
</style>
</head>
<body>
	
	<div class="home_header">
		<div class="Interface_center row" style="width: auto;">
			<div class="col-xs-6" style="height: 42px;position: relative;overflow: hidden;">
				<div class="home_header_left">
					<span><img
						src="<c:url value='/share/images/book.png'></c:url>">${platformName}</span>
				</div>
			</div>
			<div class="col-xs-6" style="height: 42px;">
				<div class="home_header_right"
					style="position: relative;height: 42px;">
					<c:if test="${not empty  userName}">
						<div class="wh_Home_news">
							<div class="header-tc-content">
			                    <span class="header-tc-ct-bg"></span>
			                    <div class="news-header">
			                    	<div class="news-title clr">
			                    		<span class="news-title-ctx">消息</span>
			                    	</div>
			                    	<ul class="news-list" id="news-list">
			                    	</ul>
			                    	<div class="news-bottom clearfix">
			                    		<a class="news-more" href="javascript:;" onclick="naviClick(6)">查看所有消息>></a>
			                    	</div>
			                    </div>
			                </div>
							<a id="remindId" href="javascript:;"
								style="display: block; width: 18px;text-align: center; top: 5px; left: 20px; background: #e93a44; position: absolute; margin: 0; border: 0; border-radius: 100%; color: #fff; padding: 0px 4px; font-size: 12px;"></a>
							<img src="<c:url value='/share/images/black1.png'></c:url>"
								id="touxiang_lingdang"
								style="width: 18.85px; height: 24px; margin-top: 7px; cursor: pointer;">
							<span class="vertical" style="margin: 0 20px; margin-top: 10px;"></span>
						</div>
						<div class="home_login_true_2" style="float: right; margin-top: 3px;">
							<c:if test="${empty url}">
							<img src="<c:url value='/share/images/head.jpg'/>" id="touxiang_true"/>
							</c:if>
							<c:if test="${not empty url}">
							<img src="${fileServer}${url}" id="touxiang_true"/>
							</c:if>
							<div class="home_login_true_2" style="float: right;">
								<div class="dropdown">
									<a class="btn btn-default dropdown-toggle" id="dropdownMenu1"
										style="color: #295c96; border: none; font-size: 16px; margin-top: 6px;">
										${userName} <span class="caret" style="margin-left: 10px;"></span>
									</a>
									<ul class="dropdown-menu">
										<li><a href="<c:url value='/login/perfectInfo'></c:url>"
											id="login_perfect">个人资料</a></li>
										<li><a href="<c:url value='/login/logout'></c:url>"
											id="login_remove">退出</a></li>
									</ul>
								</div>
							</div>
					</c:if>
					<c:if test="${empty  userName}">
						<a href="<c:url value='/login'></c:url>">登录</a>
						<a href="<c:url value='/login/register'></c:url>">注册</a>
					</c:if>
				</div>
			</div>
		</div>
	</div>
	<div class="home_header_1">
		<div class="Interface_center" style="width: auto;">
			<ul class="home_header-nav menu-nav clearfix">
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li>
				<li id="li1"><a class="features-event track-event"
					href="javascript:naviClick(1)">课程</a></li>
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li>
				<li id="li2"><a class="features-event track-event" href="javascript:naviClick(2)">案例</a>
				</li>
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li>
				<li id="li3"><a class="plan-event track-event" href="javascript:naviClick(3)">考试</a>
				</li>
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li>
				<li id="li4"><a class="templates-event track-event"
					href="javascript:naviClick(4)">涉外安全资料</a></li>
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li>
				<%-- <li id="li5"><a class="templates-event track-event"
					href="javascript:naviClick(5)">咨询答疑</a></li>
				<li><img src="<c:url value='/share/images/12_07.png'></c:url>"></li> --%>
			</ul>
		</div>
	</div>
	<div id="panDown" style="width: 100%; height: 100%;">
		<iframe id="contentPan" class="subPageFrame" frameborder="0">
		</iframe>
	</div>
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content" style="padding: 0 25px;">
	      <div class="modal-header" style="padding: 15px 0;border-bottom: 1px solid #1e519f;">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel" style="font-size: 16px;"></h4>
	      </div>
	      <div class="modal-body" style="color: #000;">
	      </div>
	      <div class="modal-body-details" style="position: relative;padding: 15px;border: 1px solid #e3e3e3;color: #000;">
	      </div>
	      <div class="modal-footer" style="border-top: 0;text-align: center;">
	        <button type="button" class="btn btn-primary" data-dismiss="modal" style="padding: 9px 35px;">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	<div id="alertSound" style="display: none"></div>
	
	<script type="text/javascript">
	$(document).ready(function(){
        $("#dropdownMenu1").mouseover(function(){
        	$(".dropdown-menu").show();
        });
        $(".dropdown-menu").mouseover(function(){
        	 $(".dropdown-menu").show(); 
         }).mouseout(function(){
            $(".dropdown-menu").hide();
         }); 
      })
      		
		var userName = '${userName}';
		var uuid = '${uuid}';
		var tabId = '${tabId}';
		var rootPath = '${rootPath}';
		if(!tabId){
			tabId = '1';
		}
		
		if (uuid) {
			var socket = new SockJS("/eduPlatform/ws");
			var stompClient = Stomp.over(socket);
			
			// Callback function to be called when stomp client is connected to server
			var connectCallback = function() {
				stompClient.subscribe('/topic/msgfetch/' + uuid, getUnReadMsg);
			};
			// Callback function to be called when stomp client could not connect to server
			var errorCallback = function(error) {
				//alert(error.headers.message);
				alert(error);
			};
			// Connect to server via websocket
			stompClient.connect("guest", "guest", connectCallback, errorCallback);
			
			//getUnReadMsg();
		}

		$(function() {
			$(".home_header-nav li").click(function() {
				$(".home_header-nav li a").removeClass("home_header_1_ClickA");
				//$(this).children().addClass("home_header_1_ClickA");
			});
			//消息信息
			$(".wh_Home_news").hover(function(){
				$(".header-tc-content").show();
			},function(){
				$(".header-tc-content").hide();
			});
			var url = null;
			var liTag = null;
			switch(tabId){
			case '1':
				url = '<c:url value="/study/course" />';
				break;
			case '2':
				url = '<c:url value="/case/study" />';
				break;
			case '3':
				url = '<c:url value="/exam/mv" />';
				break;
			case '4':
				url = '<c:url value="/foreign/study" />';
				break;
			case '5':
				url = '<c:url value="/consultation" />';
				break;
			case '6':
				url = '<c:url value="/msg/0" />';
				break;
			default:
				url = '<c:url value="/study/course" />';
			}
			$('#li'+tabId).children().addClass("home_header_1_ClickA");
			var height = $(this).outerHeight() - 84 + "px";
			$('#contentPan').css('height', height).css('width', '100%').attr(
					'src', url);
			
			$(window).resize(function(){
				$('#contentPan').css('height', height);
			});
		});
		
		function naviClick(id) {
			location.href='<c:url value="/?tabId=" />'+id;
		}

		//有新的推送，获取未读消息条数并显示
		function getUnReadMsg() {
			var htmlStr = '<audio src="'+rootPath+'/share/voice/remind.m4a" autoplay="autoplay"></audio>';
			$('#alertSound').html(htmlStr);
			init_count();
		}
		
		//消息查看
		function checkMsg(){
			
		}
		
		$("#news-list li").click(function(){
			var DataUrl = $(this).children().children("a").data('url');
			$(".clearfix li a").removeClass("home_header_1_ClickA");
			$("#contentPan").attr("src",DataUrl);
		});
		
		var NewsListHtml;
		var ContentHtml = "";
		var MsgTitle = "";
		var MsgDetailsHtml = "";
		$("#news-list").on("click","li>div>a",function(){
			var id = $(this).data('id');
			//init_count();
			$(".modal-body").html(MsgDetailsHtml);
			$(".modal-body-details").html(ContentHtml);
			$("#myModalLabel").html(MsgTitle);
			init_msg(1);
			if($("#contentPan").attr("src") == "/eduPlatform/msg/0"){
				$("#contentPan").attr("src","/eduPlatform/msg/0");
			}
		})
		init_msg();
		//获取消息推送信息
		function init_msg(type){
			var url = "<c:url value='/msg/list'></c:url>";
			$.ajax({
				url: url,
				type: 'POST',
				dataType: 'html',
				data:{
					"pageSize": 4,
					"uuid": uuid,
					"notRead": true
				},
				success:function(data){
					var obj = gridDataFormat(data);
					//console.log(obj);
					var html = "";
					var AlertHtml = "";
					ContentHtml = "";
					MsgTitle = "";
					MsgDetailsHtml = "";
					if(obj.count == 0){
						html += '<li class="news-item clr">'+
					            	'<div class="news-ctx clr" style="text-align: center;">'+
				        				'目前没有新消息'+
				        			'</div>'+
				        		'</li>';
					}
					for(var i in obj.data){
						ContentHtml = obj.data[i].msgCon == null?"无":obj.data[i].msgCon;
						MsgTitle = obj.data[i].msgName == null?"无":obj.data[i].msgName;
						pushTime = obj.data[i].pushTime == null?"无":obj.data[i].pushTime;
						creater = obj.data[i].creater == null?"无":obj.data[i].creater;
						createTime = obj.data[i].createTime == null?"无":obj.data[i].createTime;
						createTime = createTime.substring(0,10) +"&nbsp;"+ createTime.substring(11,16);
						pushReason = obj.data[i].pushReason == null?"无":obj.data[i].pushReason;
					    MsgDetailsHtml = '<div style="width: 195px; float: left;">'+
						       			 	'接收人：'+ MsgTitle +''+
							      		 '</div>'+
							      		 '<div>'+
							      		 	 '推送时间：'+ pushTime +''+
							      		 '</div>'+
							      		 '<div style="width: 195px; float: left;">'+
							      			 '编制人：'+ creater +''+
							      		 '</div>'+
							      		 '<div>'+
							      			 '编制时间：'+ createTime +''+
							      		 '</div>'+
							      		 '<div>'+
							      			 '推送原因： '+ pushReason +''+
							      		 '</div>';
						AlertHtml = obj.data[i].type == "自定义"?'data-toggle="modal" data-target="#myModal" href="javascript:;"':'target="_blank" href="<c:url value="/surveyAnalyze/answerMv/'+ obj.data[i].relatedId +'"></c:url>"';
						html += '<li class="news-item clr" onclick="state_change('+ obj.data[i].id +')">'+
				            		'<div class="news-ctx clr">'+
				        				'<a class="news-ctx-link  blank_to" '+ AlertHtml +' data-id="'+ obj.data[i].id +'" data-url="/eduPlatform/msg/'+ obj.data[i].id +'" data-state="'+ obj.data[i].state +'" title="'+ obj.data[i].type +'—'+ obj.data[i].msgName +'">'+ obj.data[i].type +'—'+ obj.data[i].msgName +'</a>'+
				        				'<div class="news-type news-app11" style="width: 8px;height: 8px;border-radius: 50%;background: #eb3f3f;float: left;margin-top: 25px;margin-left: 15px;"></div>'+
				        			'</div>'+
				        		'</li>';
					}
					NewsListHtml = html;
					$("#news-list").html(html);
					if(type != 1){
						$(".modal-body").html(MsgDetailsHtml);
						$(".modal-body-details").html(ContentHtml);
						$("#myModalLabel").html(MsgTitle);
					}
				},
				error:function(){
					//console.log();
				}
			});
		}
		
		//改变状态
		function state_change(id){
			var url = "<c:url value='/msg/read'></c:url>";
			$.ajax({
				url: url,
				type: 'POST',
				dataType: 'html',
				data:{
					"ids":id
				},
				success:function(data){
					if(data < 1){
						//alert("阅读失败");
						location.reload();
					}
				},
				error:function(){
					//console.log();
				}
			});
		}
		
		init_count();
		//获取未读数
		function init_count(){
			var url = "<c:url value='/msg/count'></c:url>";
			$.ajax({
				url: url,
				type: 'POST',
				dataType: 'JSON',
				data:{
					"uuid": uuid,
					"notRead": true
				},
				success:function(data){
					if(data < 1){
						data = "";
					}else if(data > 9){
						data = "...";
					}
					$("#remindId").html(data);
				},
				error:function(){
					//console.log();
				}
			});
		}
		
	</script>
</body>
</html>
